<div class="drop-shadow-lg bg-white border">
    <div class="bg-main p-2 font-semibold text-white uppercase">
        <svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="inline">
            <path d="M10.985 3.165a1 1 0 0 0-1.973-.33l-.86 5.163L3.998 8a1 1 0 1 0 .002 2l3.817-.002-.667 4L3 14a1 1 0 1 0 0 2l3.817-.002-.807 4.838a1 1 0 1 0 1.973.329l.862-5.167 4.975-.003-.806 4.84a1 1 0 1 0 1.972.33l.862-5.17L20 15.992a1 1 0 0 0 0-2l-3.819.001.667-4.001L21 9.99a1 1 0 0 0 0-2l-3.818.002.804-4.827a1 1 0 1 0-1.972-.33l-.86 5.159-4.975.003.806-4.832Zm-1.14 6.832 4.976-.003-.667 4.001-4.976.002.667-4Z" fill="#ffffff"/>
        </svg>
        Number
    </div>
    <div class="p-4 relative">
        <input type="number" class="border rounded" @bind="@Node.Value"/>
        <PortRenderer Port="@Node.Ports[0]"
                      Class="rounded-full bg-main p-2 absolute"
                      Style="right: -8px; top: 50%; transform: translateY(-50%);"/>
    </div>
</div>

@code {

    [Parameter]
    public NumberNodeModel Node { get; set; } = null!;

}